<!DOCTYPE html>
<!--suppress ALL -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>房间列表</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="../../vendor/bootstrap/css/bootstrap.min.css">
    <link href="//cdn.bootcss.com/bootstrap-select/1.10.0/css/bootstrap-select.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/bootstrap-daterangepicker/2.1.24/daterangepicker.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../../vendor/admin-lte/css/AdminLTE.min.css">
    <link rel="stylesheet" href="../../vendor/admin-lte/css/skins/skin-blue.min.css">
    <link href="https://cdn.bootcss.com/bootstrap3-dialog/1.35.4/css/bootstrap-dialog.css" rel="stylesheet">
    <style>
        thead th {
            background-color: #f1f1f1;
            min-width: 50px;
        }

        td {
            background-color: #fafffb;
            border: white solid 1px;
        }

        th, td {
            font-size: 12px;
        }

        .box {
            border: 0px;
        }

        .add {
            margin: 10px 80px;
            margin-top: 50px;
        }

        a {
            color: #00f;
            font-weight: 300;
        }

        .hover:hover {
            cursor: pointer;
        }

        #add {
            float: left;
        }

        #search {
            width: 400px;
            padding-left: 10px;

        }
    </style>
    <script src="../../vendor/jquery/jQuery-2.2.0.min.js"></script>
    <script src="../../vendor/jquery/jqueryUi/jquery-ui.min.js"></script>
    <script src="../../vendor/bootstrap/js/bootstrap.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
    <script src="//cdn.bootcss.com/bootstrap-select/1.10.0/js/i18n/defaults-zh_CN.min.js"></script>
    <script src="//cdn.bootcss.com/moment.js/2.14.1/moment.min.js"></script>
    <script src="//cdn.bootcss.com/moment.js/2.14.1/locale/zh-cn.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap3-dialog/1.35.4/js/bootstrap-dialog.js"></script>
    <script src="../../vendor/bootstrap/js/daterangepicker.js"></script>
    <script src="../../address-resolver.js"></script>
    <script src="../../vendor/vue/vue.min.js"></script>
    <script src="../../common.js"></script>


</head>

<body>


<div id="app" class="container-fluid">
    <div class="input-group">

       <!-- <div class="input-group" id="add">
            <a class="btn btn-primary" href="#" @click="add">新增</a>
        </div>-->

        <div class="input-group" id="search">
            <input type="text" v-model="roomCode" class="form-control input-group-sm" placeholder="房间号"><span
                class="input-group-addon btn btn-primary" @click="search">搜索</span>
        </div>

    </div>

    <div id="addDialog" style="display: none">
        <div class="add">
            <label>房间号:<input v-model="rName" type="text"/></label>
            <label>备注信息:<input v-model="rInfo" type="text"/></label>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-7">
            <div class="box">
                <div class="box-body table-responsive">
                    <table class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>房间名称</th>
                            <th>是否空房</th>
                            <th>备注</th>
                           <!-- <th>操作</th>-->
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="room in roomlist">
                            <td>{{$index}}</td>
                            <td>{{room.name}}</td>
                            <td v-if="room.isEmpty">是</td>
                            <td v-else>否</td>
                            <td>{{room.info}}</td>
                           <!-- <td>
                                &lt;!&ndash; <a href="newRoom.html?roomN={{room.name}} &roomInfo={{room.info}} &roomIsEmpty={{room.isEmpty}}">修改</a>&ndash;&gt;
                                <a href="#" @click="edits(room.name,room.info)">修改</a>
                                &nbsp;&nbsp;<a href="#" @click="delete(room.name)">删除</a></td>-->
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>


</div>


<script>
    //首先使用一个闭包,防止污染全局对象

    (function () {
        var Request = GetRequest();
        //定义页面的mvvm对象,用法参考 vuejs框架
        var vm = new Vue({
                el: "#app",
                data: {
                    roomlist: [],
                    roomCode: '',
                    rName: '',
                    rInfo: '',
                    rNum: Request.roomN,
                    rInfo: Request.roomInfo,
                    rIsEmpty: Request.roomIsEmpty,
                    info:''
                },
                computed: {},
                created: function () {
                    this.loadData();
                },
                watch: {},
                methods: {
                    loadData: function () {
                        var param = {
                            userId: "1"
                        };
                        var _this = this;
                        getList(param, function (data) {
                            _this.roomlist = data;
                        });
                    },
                    edits: function(name,info){

                        BootstrapDialog.show({
                            title: '修改',
                            message: getEditDialog(name,info) ,
                            buttons: [{
                                label: '提交',
                                action: function () {
                                    var info1=$("#info").val();
                                    var param={name:name,info:info1}
                                    getEdit(param,function () {
                                        window.location.href="room.html";
                                    });
                                }
                            },{
                                label: '取消',
                                action: function(dialogItself){
                                    dialogItself.close();
                                }
                            }]
                        });
                    },
                    search: function () {
                        var _this = this;
                        var param = {name: this.roomCode};
                        if (param == null) {
                            this.loadData();
                        } else {
                            getSearch(param, function (data) {
                                _this.roomlist = data;
                            })
                        }

                    },
                    delete: function (name) {
                        var param = {
                            name: name
                        };
                        getdelete(param, function () {
                            window.location.href="room.html";
                        });
                        this.loadData();
                    },
                    add:function () {
                        BootstrapDialog.show({
                            title: '增加',
                            message: getAddDialog() ,
                            buttons: [{
                                label: '提交',
                                action: function () {
                                    var info=$("#info").val();
                                    var name=$("#name").val();
                                    var userId="1";
                                    var param={userId:userId,name:name,info:info}
                                    getAdd(param,function () {
                                        window.location.href="room.html";
                                    });
                                }
                            },{
                                label: '取消',
                                action: function(dialogItself){
                                    dialogItself.close();
                                }
                            }]
                        });
                    }

                }

            })
            ;

        function getList(param, cp) {
            $.get("/room/list", param, cp);
        }

        function getAdd(param, cp) {
            $.post("/room/add", param, cp);
        }

        function getEdit(param, cp) {
            $.get("/room/edit", param, cp);
        }

        function getdelete(param, cp) {
            $.get("/room/delete", param, cp);
        }

        function getSearch(param, cp) {
            $.get("/room/search", param, cp);
        }


        function getEditDialog(name,info) {
            return $('<div>' +
                '<div class="form-group"> ' +
                '<span>房间号：</span> <input type="text" id="name" v-model="name" class="form-control" readonly aria-describedby="basic-addon1" value='+name+'>' +
                '<br> ' +
                '</div>' +
                '<div class="form-group" > <span>备注信息：</span> <input id="info"  v-model="info" type="text" class="form-control"   aria-describedby="basic-addon1" value='+info+' >' +
                '<br>' +
                ' </div>' +
                '</div>')
        }

        function getAddDialog() {
            return $('<div>' +
                '<div class="form-group"> ' +
                '<span>房间号：</span> <input type="text" id="name" v-model="name" class="form-control" aria-describedby="basic-addon1" value="">' +
                '<br> ' +
                '</div>' +
                '<div class="form-group" > <span>备注信息：</span> <input id="info"  v-model="info" type="text" class="form-control"   aria-describedby="basic-addon1" value="" >' +
                '<br>' +
                ' </div>' +
                '</div>')
        }
    })();
</script>


</body>

</html>